<template>
  <div class="app-container" v-if="vif">
    <section class="user-status">
      <span
        >认证状态：<el-tag :type="form.status | showStatus">{{
          form.status
        }}</el-tag></span
      >
      <el-button
        @click="passApply"
        type="success"
        class="pass-btn"
        :disabled="!isApplying"
        >通过</el-button
      >
      <el-button
        @click="denyApply"
        type="danger"
        class="deny-btn"
        :disabled="!isApplying"
        >拒绝</el-button
      >
      <div class="certificate">
        <span v-if="form.status == '待认证'">用户未上传证件</span>
        <span v-if="form.status != '待认证'">用户已上传证件</span>
        <el-button
          type="primary"
          @click="showCerti = true"
          class="check-btn"
          size="small"
          :disabled="form.status == '待认证'"
          >查看用户上传的证件</el-button
        >

        <el-dialog
          title="用户证件信息"
          :visible.sync="showCerti"
          class="certi_dialog"
        >
          <p>身份证正面</p>
          <img
            :src="this.form.id_card_front"
            title="身份证正面"
            class="photo"
          />
          <p>身份证背面</p>
          <img :src="this.form.id_card_back" title="身份证背面" class="photo" />

          <p>学生证</p>
          <img :src="this.form.student_card" title="学生证" class="photo" />
          <p>其他证件</p>
          <img :src="this.form.other_img" title="其他证件" class="photo" />
        </el-dialog>
      </div>
      <div class="authority">
        <span>是否能够发布代购申请</span>
        <el-switch
          active-color="#13ce66"
          inactive-color="#ff4949"
          class="applyswitch"
          :value="userStatus.isAllowApply"
          @change="switchChange"
        >
        </el-switch>
      </div>
    </section>
    <el-form ref="form" :model="form" label-width="80px" class="user-info">
      <el-form-item>
        <el-button
          type="primary"
          @click="updateFrom"
          class="update-btn"
          v-show="!isEditing"
          >修改</el-button
        >
        <el-button
          type="primary"
          @click="confirmUpdate"
          class="update-btn"
          v-show="isEditing"
          >确认</el-button
        >
        <el-button
          type="danger"
          @click="cancelUpdate"
          class="update-btn"
          v-show="isEditing"
          >取消</el-button
        >
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickName" :disabled="!isEditing"> </el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" :disabled="!isEditing"> </el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender" :disabled="!isEditing">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.mail" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="账户">
        <el-select
          v-model="form.account"
          placeholder="账户"
          :disabled="!isEditing"
        >
          <el-option label="支付宝" value="alipay" selected></el-option>
          <el-option label="微信" value="wxpay"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <el-select
          v-model="form.status"
          placeholder="用户认证状态"
          :disabled="!isEditing"
        >
          <el-option label="待认证" value="待认证" selected></el-option>
          <el-option label="待审核" value="待审核"></el-option>
          <el-option label="未通过" value="未通过"></el-option>
          <el-option label="已认证" value="已认证"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="身份证正">
        <el-input
          v-model="form.id_card_front"
          :disabled="!isEditing"
        ></el-input>
      </el-form-item>

      <el-form-item label="身份证反">
        <el-input v-model="form.id_card_back" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="学生证">
        <el-input v-model="form.student_card" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-input v-model="form.avatarUrl" :disabled="!isEditing"></el-input>
      </el-form-item>

      <el-form-item label="其他">
        <el-input v-model="form.other_img" :disabled="!isEditing"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import "@/styles/common.css";
export default {
  data() {
    return {
      form: {
        name: "张三",
        gender: "男",
        phone: "12345678910",
        mail: "1245367896@dl.com",
        address: "重庆市南岸区重庆邮电大学",
        account: "alipay"
      },
      formCopy: {}, // 用于还原取消按钮后原数据的 临时表单
      isEditing: false, // 是否正在编辑表单状态
      userStatus: {
        //用户状态
        status: 0,
        isAllowApply: false
      },
      showCerti: false, //是否展示证件
      openId: "", // 微信的openID
      isApplying: false, //用户是否正在审核中
      vif: false //如果不带applyid进入页面不显示
    };
  },
  filters: {
    showStatus(status) {
      const statusMap = {
        待认证: "info",
        待审核: "danger",
        未通过: "warning",
        已认证: "success"
      };
      return statusMap[status];
    }
  },
  created() {
    if (this.$route.params.applyId === ":applyId") {
      this.$message({
        message: "请从用户列表进入此页面",
        type: "error"
      });
      return;
    }
    this.vif = true;
    this.openId = this.$route.params.applyId;
    this.fetchFormData();
  },
  methods: {
    updateFrom() {
      this.isEditing = true;
      const form = this.form;
      // 备份form的数据
      for (const key in form) {
        if (Object.hasOwnProperty.call(form, key)) {
          this.formCopy[key] = form[key];
        }
      }
    },
    cancelUpdate() {
      this.isEditing = false;
      const formCopy = this.formCopy;
      // 还原备份
      for (const key in formCopy) {
        if (Object.hasOwnProperty.call(formCopy, key)) {
          this.form[key] = formCopy[key];
        }
      }
    },
    confirmUpdate() {
      this.isEditing = false;
      // 发送Update请求
      this.$http.post("updateUser", this.form).then(res => {
        window.location.reload(); //更新页面
        this.$message({
          message: res.data.meta.msg,
          type: "success"
        });
      });
    },
    switchChange() {
      if (this.userStatus.isAllowApply) {
        console.log("关闭权限");
        this.$http
          .post("updateUser", { openid: this.openId, status: "待认证" })
          .then(res => {
            window.location.reload(); //更新页面
            this.$message({
              message: res.data.meta.msg,
              type: "success"
            });
          });
      } else {
        console.log("开启权限");
        this.$http
          .post("updateUser", { openid: this.openId, status: "已认证" })
          .then(res => {
            window.location.reload(); //更新页面
            this.$message({
              message: res.data.meta.msg,
              type: "success"
            });
          });
      }
      this.userStatus.isAllowApply = !this.userStatus.isAllowApply;
    },
    fetchFormData() {
      this.$http.post("getUser", { openid: this.openId }).then(res => {
        console.log(res.data.data[0]);
        this.form = res.data.data[0];
        if (this.form.status === "待审核") {
          this.isApplying = true;
        } else if (this.form.status === "已认证") {
          this.userStatus.isAllowApply = true;
        }
        this.listLoading = false;
      });
    },
    passApply() {
      console.log("通过用户认证");
      this.$http
        .post("updateUser", { openid: this.openId, status: "已认证" })
        .then(res => {
          window.location.reload(); //更新页面
          this.$message({
            message: res.data.meta.msg,
            type: "success"
          });
        });
    },
    denyApply() {
      console.log("拒绝用户认证");
      this.$http
        .post("updateUser", { openid: this.openId, status: "未通过" })
        .then(res => {
          window.location.reload(); //更新页面
          this.$message({
            message: res.data.meta.msg,
            type: "success"
          });
        });
    }
  }
};
</script>

<style scoped>
.user-info {
  padding: 20px 24px 4px 4px;
  margin-right: 40%;
  min-width: 500px;
  box-shadow: 0 2px 12px 2px rgba(68, 73, 77, 0.16);
}
.update-btn {
  float: right;
}
.user-status {
  min-width: 500px;
  margin-right: 40%;
  padding: 20px;
}
.pass-btn,
.deny-btn {
  margin-left: 20px;
}
.certificate,
.authority {
  padding-top: 20px;
}
.check-btn {
  margin-left: 20px;
}
.applyswitch {
  margin-left: 20px;
}
/* 用户证件 */
.certi_dialog {
  padding-top: 0;
}
.photo {
  width: 350px;
  height: 350px;
}
.certi_dialog p {
  font-size: 18px;
}
</style>
